<template>
	<div class="cadView">
		<div class="toolbar">
			<div class="t-content">

				<Head style="width: 100%" />
			</div>
			<selectShapeParams ref="paramslayout" class="params-layout" :isAble="isMarkupEnable"
				@handleSelectChange="onParamsSelectChange" @handlePrintClick="printSVGViewer"
				@handleResetViewClick="resetSVGViewer" @handleDownLoadClick="downLoadFile"
				:isMarkupEnable="isMarkupEnable" @onMenuClick="removeActiveClass" />
		</div>

		<div class="content-view">
			<!-- 左侧菜单 -->
			<addShapesLayout ref="shapeslayout" class="shapes-layout" :leftToolFalg="!isMarkupEnable"
				:isAble="isMarkupEnable" @handleSelectChange="onShapeSelectChange" />

			<!-- cad图纸 -->
			<div id="right-CAD" class="right-CAD" :style="optTypeRadio == 2 || optTypeRadio == 1
				? 'width: calc(100% - 48px  - 25vw)'
				: 'width: calc(100% - 48px)'
				"></div>

			<rightRelativeView class="rightRelativeView" ref="rightRelativeView" :isMarkupEnable="isMarkupEnable"
				@onTableItemSelect="onTableItemSelect" @upMarkInfo="upMarkInfo"
				@updateParamOnSelected="updateParamOnSelected" @closeIsMarkupEnable="closeIsMarkupEnable" />
		</div>

		<!-- 底栏内容 -->
		<div class="bottom-content">
			<div class="l">
				<span>Ready</span>
			</div>
			<div class="X">
				<span>X: {{ mousePosX.toFixed(3) }}</span>
			</div>
			<div class="Y">
				<span>Y: {{ mousePosY.toFixed(3) }}</span>
			</div>
			<div class="file-Date">
				<span style="marginleft: 16px">File Date:</span>
				<span>{{ fileDate }}</span>
			</div>
		</div>

		<el-dialog :visible.sync="centerDialogVisible" :modal-append-to-body="false" width="448px" top="40vh"
			:title="$t('message.cadViewer.taggingMode.exitMarkup')">
			<div style="display: flex;align-items: center;">
				<div class="el-message-box__status el-icon-warning" style="margin-top: -4px;"></div>
				<div style="margin-left: 35px;height: 24px;line-height: 24px;">
					変更内容を保存します、宜しいですか？
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<button @click="onMarkupModeExit(0)" size="small" class="markupbtn">
					{{ $t("message.public.markupconfirm") }}
				</button>
				<button @click="onMarkupModeExit(1)" size="small" class="markupbtn">
					{{ $t("message.public.markupout") }}
				</button>
				<button @click="onMarkupModeExit(2)" size="small" class="markupbtn">
					{{ $t("message.public.markupcancel") }}
				</button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
import selectShapeParams from "@/components/pfdCadView/selectShapeParams";
import addShapesLayout from "@/components/pfdCadView/addShapesLayout";
import rightRelativeView from "@/components/pfdCadView/rightRelativeView";

import Head from "@/components/header/Head";
import { getFile, getPFD, AddPfdData, addAreaData, DelPfdData, delAreaPfdData, getAreaMarkupData } from "@/api/api";
import * as svg_opt from "@/utils/svg_opt1.js";
import tools from "@/utils/tools.js";
import eventBus from "@/eventBus/bus";
import BASE from "@/utils/base"
import { getLocalStorage } from "@/utils/storage";

// 导出模块
export default {
	// 模块名字
	name: "pfdCadView",
	// 模块数据
	data() {
		return {
			optTypeRadio: null,
			pdfFile: null,
			pltCode: null,
			proCode: null,
			proName: null,
			sourceWidth: 0,
			sourceHeight: 0,
			proPass: "",

			// 处理系
			inProCode: 13,

			// 页面加载
			pageLoading: null,

			// 是否开启markup编辑
			isMarkupEnable: false,

			isMarkupEnableTrue: false,	//右侧列表未选择禁止开启

			// 选中的图形属性 不需要图形属性
			selectedParams: {},

			// 显示模式？
			optTypeRadio: 1,

			// 鼠标位置坐标
			mousePosX: 0,
			mousePosY: 0,

			// 文件修改时间
			fileDate: null,

			// 图纸文件地址
			fileUrl: null,

			// 是否图片资源  不是svg
			isSourcePic: false,

			centerDialogVisible: false,

			svgSourceUrl: "",
			sourceExt: "",
			sourceUrl: "",

			// 标记文件信息 ？
			showCreateNewFileDialog: false,
			showCreateNewFileType: 0, // 0 create  1 査看  2 saveas

			// 选择的图形id
			selectedShapeId: 0,
			drawData: [],
			resFpdData: [],
			isDel: false,
			delData: [],
			rightList: [],
		};
	},

	watch: {
		selectedParams(val) {
			svg_opt.setGParams(val);
		},
	},
	/**
	 * 已乱：根据流程找方法进行修改
	 */

	methods: {
		closeIsMarkupEnable(flg) {
			this.isMarkupEnableTrue = flg;
		},
		async DelPfdDataApi() {
			let res;
			let Api = this.$route.query.AreaCode ? delAreaPfdData : DelPfdData;
			this.delData.forEach(async (i, v) => {
				let dataJson = {
					ProCode: Number(this.proCode),
					PrlNo: i,

					AreaCode: Number(this.$route.query.AreaCode),
					AreaNo: i,
				}
				res = await Api(dataJson);
			})

			// if(res.data.code != 0){
			// 	return
			// }
			this.delData = [];

			// eventBus.$emit("reGetPfdList")
			setTimeout(() => {
				this.requirePfdApi();
				this.$refs.rightRelativeView.GetPFDDescApi();
				this.isMarkupEnable = false;
				svg_opt.setCanEditSelectMarkup(false);
			}, 300);

		},
		upMarkInfo(e) {
			let dataJson = this._getUpPfdDataJsonNew();
			console.log(dataJson)
			this.AddPfdDataApi(dataJson);
		},

		_getUpPfdDataJsonNew() {
			let allMarks = svg_opt.getAllMarks();
			console.log('allMarks', allMarks)
			this.rightList = this.$refs.rightRelativeView.macNumberDataList;
			// return
			// let o = [
			// 	{
			// 		proCode: 13,
			// 		proNo: 1,
			// 		pfdDescStr: "",
			// 		pfdList: [
			// 			{ prlFntsiz: 1, prlX: 521, prlY: 7, prlType: 1, dtlNo: 1 },
			// 			{ prlFntsiz: 2, prlX: 641, prlY: 24, prlType: 1, dtlNo: 1 },
			// 			{ prlFntsiz: 1, prlX: 621, prlY: 7, prlType: 1, dtlNo: 2 },
			// 			{ prlFntsiz: 2, prlX: 741, prlY: 24, prlType: 1, dtlNo: 2 }
			// 		]
			// 	}
			// ]
			let result = [];
			for (let i = 0; i < this.rightList.length; i++) {
				let temp = {
					proCode: Number(this.proCode),
					proNo: this.rightList[i].prlNo,
					pfdDescStr: this.rightList[i].name || '',
					pfdList: []
				}
				let dtlNo = 0;
				let flg = false;
				for (let k = 0; k < allMarks.length; k++) {
					if (this.rightList[i].prlNo == allMarks[k].originData.prlNo || this.rightList[i].prlNo == allMarks[k].originData.selectTableItemprlNo) {
						flg = true;
						dtlNo++;
						let prlType = allMarks[k].originData.shapeType == 4 ? 3 : allMarks[k].originData.shapeType == 3 ? 2 : 1
						allMarks[k].originData.pointList.forEach((item, index) => {
							temp.pfdList.push({
								prlFntsiz: index + 1,
								prlX: item.x.toString(),
								prlY: this.sourceExt == "svg" ? item.y.toString() : item.y <= 1 ? Math.abs(item.y).toString() : (-item.y).toString(),
								prlType,
								dtlNo
							})
						})
					}
				}
				if (flg) result.push(temp)
			}

			console.log(result, "result")

			return result
		},
		//处理更新数据
		// 更新
		async AddPfdDataApi(dataJson) {
			// return

			console.log(dataJson, "DSDSDSDSDDSDSDDS")
			dataJson.forEach(item => {
				item.AreaCode = Number(this.$route.query.AreaCode);
				item.AreaNo = item.proNo;
				item.AreaList = item.pfdList;
			})

			let Api = this.$route.query.AreaCode ? addAreaData : AddPfdData;
			let res = await Api(dataJson);
			if (res.data.code != 0) {
				this.$message({
					type: 'error',
					message: res.data.msg
				});
				return
			}
			this.$message({
				type: 'success',
				message: "OK"
			});
			this.$refs.rightRelativeView.GetPFDDescApi();
			this.requirePfdApi(dataJson.proNo);

			this.isMarkupEnable = false;
			svg_opt.setCanEditSelectMarkup(false);

		},

		_getDrawDataJson(Arr) {
			let result = {
				proCode: Number(this.proCode),
				proNo: this.$refs.rightRelativeView.selectTableItem.prlNo,
				pfdDescStr: this.$refs.rightRelativeView.selectTableItem.name || '',
				pfdList: [],
			};
			let list = {};
			var tempNum = 0
			Arr.forEach((i, v) => {
				if (i.pointList) {
					i.pointList.forEach((a, b) => {

						let prlType;
						if (Arr[v].shapeType == 2) {
							prlType = 1;
						}
						if (Arr[v].shapeType == 3) {
							prlType = 2;
						}
						if (Arr[v].shapeType == 4) {
							prlType = 3;
						}
						tempNum++

						result.pfdList.push({
							prlFntsiz: tempNum,
							prlX: a.x.toFixed(0).toString(),
							prlY: Math.abs(a.y.toFixed(0)).toString(),
							prlType,
							dtlNo: v + 1
						})
					})
				}
			})
			return result;
		},

		/**
		 * 页面加载遮罩
		 */
		showPageLoading(val) {
			if (val) {
				this.pageLoading = this.$loading({
					// 声明一个loading対象
					lock: true, // 是否锁屏
					fullscreen: true,
					// text: "正在加载...", // 加载动画的文字
					// spinner: "el-icon-loading", // 引入的loading图标
					background: "rgba(255, 255, 255, 0.3)", // 背景颜色
					customClass: "loading-mask",
				});
			} else {
				if (this.pageLoading) this.pageLoading.close();
			}
		},

		/**
		 * svg部分加载完成回调
		 */
		onSvgLoaded() {
			console.log('this.sourceExt', this.sourceExt);
			this.showPageLoading(false);
			let EXT = this.sourceExt
			if (
				EXT == "png" ||
				EXT == "jpg" ||
				EXT == "gif" ||
				EXT == "bmp" ||
				EXT == "jpeg" ||
				EXT == "tif" ||
				EXT == "tiff"
			) {
				svg_opt.changeSvgElementData({
					tagName: "img-content",
					paramName: "xlink:href",
					newValue: this.sourceUrl,
				});
			} else if (EXT == "tif" || EXT == "tiff") {
				svg_opt.changeSvgElementData({
					tagName: "img-content",
					paramName: "xlink:href",
					newValue: this.sourceUrl,
				});
			}

			this.isSvgLoaded = true;
			this.requirePfdApi();
		},

		/** selectShapeParams
		 * 图形参数改变回调
		 */
		onParamsSelectChange(e) {
			// return;
			this.selectedParams = e;
		},

		/** selectShapeParams
		 * 打印
		 */
		printSVGViewer() {
			// this.$nextTick(function(){
			//   this.$print(this.$refs.right_CAD, {});
			// })
			var userAgent = navigator.userAgent.toLowerCase(); //取得浏览器的userAgent字符串
			if (userAgent.indexOf("trident") > -1) {
				this.$alert("请使用google浏览器", {
					confirmButtonText: 'OK',
					type: 'warning',
				});
				return false;
			} else if (userAgent.indexOf("msie") > -1) {
				var onlyChoseAlert = simpleAlert({
					content: "请使用Google或者360浏览器打印",
					buttons: {
						确定: function () {
							onlyChoseAlert.close();
						},
					},
				});
				this.$alert("请使用google", {
					confirmButtonText: 'OK',
					type: 'warning',
				});
				return false;
			} else {
				var headstr = "<html><head><title></title></head><body>";
				var footstr = "</body></html>";
				var printData = document.getElementById("right-CAD").innerHTML; //获得 div 里的所有 html 数据
				var wind = window.open(
					"",
					"newwin",
					"toolbar=no,scrollbars=yes,menubar=no"
				);
				wind.document.body.innerHTML = headstr + printData + footstr;
				wind.print(printData);
				// printArea
			}
		},

		/** selectShapeParams
		 * 重置svg视图
		 */
		resetSVGViewer() {
			svg_opt.ResetSvgView();
		},

		/** selectShapeParams
		 * 下载图纸
		 */
		downLoadFile() {
			if (this.fileUrl) window.location.href = this.fileUrl;
		},

		/** selectShapeParams
		 * 菜单响应
		 */
		removeActiveClass(name) {
			if (!this.isMarkupEnableTrue) {
				this.$alert("右のリストからお選びください", '', {
					confirmButtonText: 'OK',
					type: 'warning',
				});
			}
			this.activeClass = null;
			console.log(name);
			// 进入标记模式
			if (name == "enter_tag_mode" && this.isMarkupEnableTrue) {
				this.$refs.rightRelativeView.allChaneList = [this.$refs.rightRelativeView.selectTableItem]
				this.isMarkupEnable = true;
				svg_opt.setCanEditSelectMarkup(true);


			}
			// 退出标记模式
			if (name == "over_tag_mode") {
				this.centerDialogVisible = true;
			}

			// save
			if (name == "save") {
				if (this.isDel) {
					this.DelPfdDataApi();
				} else {
					this.upMarkInfo(this.$refs.rightRelativeView.selectTableItem);
				}



			}

			// sign_file 査看信息
			if (name == "sign_file") {
				this.showCreateNewFileDialog = true;
				this.showCreateNewFileType = 1;
			}
		},

		/**
		 * 图形选择组件  图形被选择
		 * 图形选择回调
		 */
		onShapeSelectChange(e) {
			// console.log((Object.keys(this.$refs.rightRelativeView.selectTableItem).length))
			//      return
			if (Object.keys(this.$refs.rightRelativeView.selectTableItem).length == 0) {
				this.$alert("清重新算则", '', {
					confirmButtonText: 'OK',
					type: 'warning',
				});

				return
			}
			this.selectedShapeId = e.selectedShapeId; // 图形id
			console.log(this.selectedShapeId)

			if (e.selectedShapeId == 0) {
				svg_opt.changeGlobalState(0, -1);
				svg_opt.SetSvgMouseMode(0);

			} else {
				svg_opt.SetSvgMouseMode(2);
				svg_opt.changeGlobalState(3, this.selectedShapeId); // add状态
			}
		},
		onSvgMousePosChange(posX, posY) {
			this.mousePosX = posX;
			this.mousePosY = posY;
		},

		onShapesLayoutChange() {
			this.$refs.shapeslayout.changeShapeId();
			this.selectedShapeId = 0; // 图形id
			console.log(this.selectedShapeId)
		},

		/** 从图形参数组件
		 * 获取选择的图形参数 
		 */
		getParamsSelect() {
			var _selectedParams = this.$refs.paramslayout.getParamsSelect();
			this.selectedParams = _selectedParams;
		},

		/**
		 * 获取线组数据
		 */
		requirePfdApi(pos) {
			let dataJson = {
				proCode: Number(this.proCode),
				// pltCode: Number(this.$route.query.pltCode),
				// Account: getLocalStorage("userName"),
				Type: 2,
				AreaCode: Number(this.$route.query.AreaCode),
			};
			let Api = this.$route.query.AreaCode ? getAreaMarkupData : getPFD;
			Api(dataJson).then((res) => {
				try {
					if (this.$route.query.AreaCode) {
						res.data.data.forEach(item => {
							item.areaCode = Number(item.areaCode);
							item.areaNo = Number(item.areaNo);
							item.areaType = Number(item.areaType);
							item.dtlNo = Number(item.dtlNo);
							item.prlFntsiz = Number(item.prlFntsiz);
							item.prlWidth = Number(item.prlWidth);
							item.prlX = Number(item.prlX);
							item.prlY = Number(item.prlY);
							item.prlNo = Number(item.areaNo);
							item.prlType = Number(item.areaType);

						})
					}
				} catch (error) {

				}
				if (res.data.code != 0) {
					return;
				}
				this.drawData = [];
				this.resFpdData = tools.deepClone(res.data.data);
				let tempData = res.data.data;

				this.pfdData = this.genLineGroupAndShow(tempData);

				svg_opt.clearAllMarkups();
				svg_opt.testAddLineGroupsByParams(this.pfdData);

				console.log(this.pfdData, "DDDDDDDDDDDdd")

				// let timer = setInterval(() => {
				// 	if(this.$refs.rightRelativeView.macNumberDataList.length != 0){
				// 		svg_opt.changeSelectStatusById(pos? pos : -1 , false);
				// 		clearInterval(timer)
				// 	}
				// }, 500);


			});
		},

		/**
		 * 处理线组数据
		 */
		genLineGroupAndShow(originData) {
			let lineGroups = [];
			let lastPrl = "";

			console.log(originData);
			console.log(this.isSourcePic);

			// 遍历节点
			for (let i = 0; i < originData.length; i++) {
				let tempData = originData[i];
				let tempLineGroup = null;

				// 如果当前节点与上一个节点的线组号不同，新建线组，压入线组list
				if (lastPrl != tempData.prlNo) {
					tempLineGroup = {};
					lineGroups.push(tempLineGroup);

					tempLineGroup.defaultLineColor = "#0000ff";
					tempLineGroup.defaultLineWidth = "10";
					tempLineGroup.prlNo = tempData.prlNo;
					tempLineGroup.groupItems = [];
					tempLineGroup.sId = tempData.prlNo;
					tempLineGroup.fEntType = "17";
				}

				// 取最近一个线组
				tempLineGroup = lineGroups[lineGroups.length - 1];

				// 如果线组为空 根据当前节点创建
				if (
					tempLineGroup.groupItems.length == 0 ||
					tempLineGroup.groupItems[
						tempLineGroup.groupItems.length - 1
					].dtlNo != tempData.dtlNo
				) {
					let newItem = {};
					newItem.dtlNo = tempData.dtlNo;
					newItem.shapeType =
						tempData.prlType == 1
							? "line"
							: tempData.prlType == 2
								? "closeline"
								: "rect";
					newItem.fEntType = "17";
					newItem.points = [];
					if (this.isSourcePic) {
						newItem.points.push({
							x: tempData.prlX,
							y: tempData.prlY < 0 ? Math.abs(tempData.prlY) : 0 - Math.abs(tempData.prlY),
						});
					} else {
						newItem.points.push({
							x: tempData.prlX,
							y: tempData.prlY,
						});
					}
					tempLineGroup.groupItems.push(newItem);
				} else if (
					tempLineGroup.groupItems[
						tempLineGroup.groupItems.length - 1
					].dtlNo == tempData.dtlNo &&
					tempLineGroup.groupItems[
						tempLineGroup.groupItems.length - 1
					].points.length >= 2
				) {
					let newItem = {};
					newItem.dtlNo = tempData.dtlNo;
					newItem.shapeType =
						tempData.prlType == 1
							? "line"
							: tempData.prlType == 2
								? "closeline"
								: "rect";
					newItem.fEntType = "17";
					newItem.points = [];

					newItem.points.push(
						tempLineGroup.groupItems[
							tempLineGroup.groupItems.length - 1
						].points[
						tempLineGroup.groupItems[
							tempLineGroup.groupItems.length - 1
						].points.length - 1
						]
					);

					if (this.isSourcePic) {
						newItem.points.push({
							x: tempData.prlX,
							y: tempData.prlY < 0 ? Math.abs(tempData.prlY) : 0 - Math.abs(tempData.prlY),
						});
					} else {
						newItem.points.push({
							x: tempData.prlX,
							y: tempData.prlY,
						});
					}
					tempLineGroup.groupItems.push(newItem);
				} else if (
					tempLineGroup.groupItems[
						tempLineGroup.groupItems.length - 1
					].dtlNo == tempData.dtlNo
				) {
					if (this.isSourcePic) {
						// newItem.points.push({ x: tempData.prlX, y: 0 - Math.abs(tempData.prlY) });
						tempLineGroup.groupItems[
							tempLineGroup.groupItems.length - 1
						].points.push({
							x: tempData.prlX,
							y: tempData.prlY < 0 ? Math.abs(tempData.prlY) : 0 - Math.abs(tempData.prlY),
						});
					} else {
						// newItem.points.push({ x: tempData.prlX, y: tempData.prlY });
						tempLineGroup.groupItems[
							tempLineGroup.groupItems.length - 1
						].points.push({ x: tempData.prlX, y: tempData.prlY });
					}
				}

				lastPrl = tempLineGroup.prlNo;
			}

			// lineGroups[0].groupItems
			console.log(lineGroups)
			return lineGroups;
		},

		/**
		 * 加载svg图纸 svg格式正常加载  位图格式先加载基础svg 在onSvgLoaded替换位图
		 */
		requireSvgData(inSourceUrl) {
			if (inSourceUrl == null || typeof inSourceUrl == "undefined") {
				svg_opt.removeSvg();
				return;
			}

			let num = inSourceUrl.lastIndexOf(".") + 1;
			this.sourceExt = inSourceUrl.substring(num);
			this.sourceUrl = inSourceUrl;

			let EXT = this.sourceExt
			if (
				EXT == "png" ||
				EXT == "jpg" ||
				EXT == "gif" ||
				EXT == "bmp" ||
				EXT == "jpeg" ||
				EXT == "tif" ||
				EXT == "tiff"
			) {
				this.isSourcePic = true;
				this.svgSourceUrl = require("@/assets/model/method-draw-image.svg");
			} else {
				this.isSourcePic = false;
				this.svgSourceUrl = inSourceUrl;
			}

			this.loadSvg();
		},

		loadSvg() {
			if (!this.svgSourceUrl || this.svgSourceUrl == "") {
				svg_opt.removeSvg();
				return;
			}

			if (this.isSvgLoading) return;

			this.isSvgLoading = true;
			svg_opt.setSvgLineWidthRatio(1.5);
			svg_opt.setSvgBoundingBoxRatio(0, 0, 1);
			// svg_opt.setSvgBoundingBoxRatio(0, -140, 1);
			// svg_opt.setCanClickSelectMarkup(true,[1,2,3,4,5,6,7,8,9,10,11,12]);

			svg_opt.setCanClickSelectMarkup(true);
			svg_opt.setCanEditSelectMarkup(false);
			svg_opt.setCanFitPositionAndScale(false);
			svg_opt.setEditDotWidthRatio(3);
			let num = this.proPass.lastIndexOf(".") + 1;
			var originExt = this.proPass.substring(num);
			svg_opt.AddSvg(
				this.svgSourceUrl,
				"right-CAD",
				this.onSvgMousePosChange,
				this.onShapesLayoutChange,
				false,
				this.sourceWidth > 0 || this.sourceHeight > 0 ? this.sourceWidth : undefined,
				this.sourceWidth > 0 || this.sourceHeight > 0 ? this.sourceHeight : undefined,
				originExt == "wmf" ? 1 : -1
			);
			svg_opt.SetSvgMouseMode(0);
			svg_opt.setSelectCallBack(this.updateParamOnSelected);
			svg_opt.setLoadCallBack(this.onSvgLoaded);
			svg_opt.setOnAddMarkupDataFun(this.onReturnBallMarkupData);
			svg_opt.setLeftMouseClickFun(() => {
				this.contextMenuVisible = false;
				// svg_opt.clearSelectedState();
			});
			svg_opt.setUpdateMarkupBaseInfoCallback(
				this.updateMarkupFileBaseData
			);

		},
		updateMarkupFileBaseData(baseInfo) {
			console.log(baseInfo)
			this.markupFileBaseData = baseInfo;
		},
		// 画的图形数据
		onReturnBallMarkupData(inData) {
			inData.selectTableItemName = this.$refs.rightRelativeView.selectTableItem.name;
			inData.selectTableItemprlNo = this.$refs.rightRelativeView.selectTableItem.prlNo;
			// if(inData.shapeType == 3){
			// 	this.drawData.unshift(inData);
			// }else{
			// 	this.drawData.push(inData);
			// }
			// if(this.drawData.length == 0){
			// 	this.drawData.push(inData);
			// }else{
			// 	this.drawData.forEach(element => {
			// 		element.prlNo == inData.prlNo;
			// 	});
			// }
			this.drawData = []
			this.drawData.push(inData);
			console.log(inData, "AAAAAAAAAAAAAAAAa")
			console.log(this.drawData, "AAAAAAAAAAAAAAAAa")

			this.isDel = false;
		},
		// 选择列表显示图片
		onTableItemSelect(inData) {
			// this.$refs.shapeslayout.resetToSelectMode();
			//     svg_opt.changeGlobalState(0, -1);

			svg_opt.changeSelectStatusById(inData ? inData.prlNo : -1, false);
		},
		// 2d图纸选中marker
		updateParamOnSelected(e) {
			console.log(e, "EEEEEEEEEEEEEEEEE")
			eventBus.$emit("changeRivhtMenu", e)


		},

		onMarkupModeExit(e) {
			if (e == 0) {
				if ((this.isDel) && (!this._isDataExist(this.$refs.rightRelativeView.selectTableItem.prlNo))) {
					this.DelPfdDataApi();
				} else {
					this.upMarkInfo(this.$refs.rightRelativeView.selectTableItem);
				}
				this.isMarkupEnable = false;
				this.centerDialogVisible = false;
			} else if (e == 1) {
				this.isMarkupEnable = false;
				this.centerDialogVisible = false;
				this.isSvgLoading = false;
				svg_opt.clearAllMarkups();
				this.onMountedPdfCadView();
				this.$refs.rightRelativeView.GetPFDDescApi(); // 右側リスト更新のため
			} else if (e == 2) {
				this.centerDialogVisible = false;
			}
		},

		// prlNoに紐づく線・矩形などのデータが１つでもあればtrueを返す
		_isDataExist(prlNo) {
			let allMarks = svg_opt.getAllMarks();
			for (let i = 0; i < allMarks.length; i++) {
				if ((allMarks[i].originData.selectTableItemprlNo == prlNo)
				 || (allMarks[i].originData.prlNo == prlNo)) {
					return true;
				}
			}
			return false;
		},

		onMountedPdfCadView() {
			// svg_opt.setCanClickSelectMarkup(true);
			// svg_opt.setCanEditSelectMarkup(false);
			//    this.svgSourceUrl = require("@/assets/model/method-draw-image.svg");
			//    svg_opt.AddSvg(this.svgSourceUrl, "right-CAD", this.onSvgMousePosChange);
			//    return;
			let _self = this;
			this.getParamsSelect("e");
			// this.optTypeRadio = Number(this.$route.query.radioType);
			// // this.onOptTypeRadioChange(this.optTypeRadio);
			// this.optMacNumb = this.$route.query.macNumb;
			// this.optMacCode = this.$route.query.macCode;

			this.optTypeRadio = Number(this.$route.query.radioType);
			this.pdfFile = this.$route.query.pdfFile;
			this.pltCode = this.$route.query.pltCode;
			this.proCode = this.$route.query.proCode;
			this.proName = this.$route.query.proName;
			this.sourceWidth = this.$route.query.sourceWidth;
			this.sourceHeight = this.$route.query.sourceHeight;
			this.proPass = this.$route.query.proPass;


			this.showPageLoading(true);
			setTimeout(() => {
				this.showPageLoading(false);
			}, 3000);
			this.requireSvgData(this.pdfFile);

			document.onmouseup  = () => {
				let button = window.event.button;
				if (button == 2) { // 右クリック
					if (_self.isMarkupEnable) { // マークアップモード有効時
						if (_self.selectedParams && _self.$refs.rightRelativeView) {
							if (svg_opt.isSelectedMarkup()) { // かつ描画中であれば右リストのチェックボックスにチェックを入れる
								_self.$refs.rightRelativeView.selectTableItem.flag = true;
							}
						}
					}
				}
			};

			document.onkeydown = () => {
				let key = window.event.keyCode;
				if (key == 46) {
					if (_self.isMarkupEnable) {
						if (_self.selectedParams && _self.$refs.rightRelativeView) {
							for (let i = 0; i < _self.resFpdData.length; i++) {
								if (_self.resFpdData[i].proCode == _self.$refs.rightRelativeView.selectTableItem.proCode && _self.resFpdData[i].prlNo == _self.$refs.rightRelativeView.selectTableItem.prlNo) {
									_self.resFpdData.splice(i, 1);
								}
							}

						}
						// eventBus.$emit('clearList', _self.$refs.rightRelativeView.selectTableItem.prlNo)
						this.delData.push(_self.$refs.rightRelativeView.selectTableItem.prlNo)
						svg_opt.tryDeleteSelectMarkup(_self.$refs.rightRelativeView.selectTableItem.prlNo);
						// svg_opt.Del_g_SelectedMarkup(_self.$refs.rightRelativeView.selectTableItem.prlNo);
						this.isDel = true;
						if (!this._isDataExist(_self.$refs.rightRelativeView.selectTableItem.prlNo)) {
							// 該当番号のデータが0個になった時は右リストのチェックボックスからチェックを外す
							_self.$refs.rightRelativeView.selectTableItem.flag = false;
						}

					}
				}
			};

			// document.onwheel = function (e) {
			// };
		}
	},


	mounted() {
		this.onMountedPdfCadView();
	},

	components: {
		Head,
		selectShapeParams,
		addShapesLayout,
		rightRelativeView,
	},
};
</script>

<style lang="scss" scoped>
.cadView {
	width: 100%;
	height: 100%;

	.toolbar {
		width: 100%;
		height: 80px;
		background: rgba(245, 245, 245, 1);

		.t-content {
			width: 100%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			text-align: center;

			background: #213d49;
			box-shadow: inset 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
		}
	}

	.content-view {
		position: relative;
		width: 100%;
		height: calc(100% - 80px);
		display: flex;
		justify-content: flex-start;

		.right-CAD {
			width: calc(100% - 48px);
			height: calc(100% - 40px);
			// min-width: 1152px;
			// min-height: 640px;
			// overflow: hidden;
			// overflow-y: auto;
		}

		.rightRelativeView {
			width: 140px;
			border: 1px solid #c3c3c3;
		}
	}

	.bottom-content {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 40px;
		border-top: 1px solid #b4b4b4;
		background: rgba(245, 245, 245, 1);

		.l {
			width: calc(100% - 490px);
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-right: 1px solid rgba(226, 226, 226, 1);

			span {
				font-size: 12px;
				margin: 16px;
			}
		}

		.X {
			width: 140px;
			height: 100%;
			display: flex;
			align-items: center;
			border-right: 1px solid rgba(226, 226, 226, 1);

			span {
				font-size: 12px;
				margin: 16px;
			}
		}

		.Y {
			width: 140px;
			height: 100%;
			display: flex;
			align-items: center;
			border-right: 1px solid rgba(226, 226, 226, 1);

			span {
				font-size: 12px;
				margin: 16px;
			}
		}

		.file-Date {
			width: 210px;
			font-size: 12px;
		}
	}
}


.dialog-exit {
	width: 30%;
}

.dialog-footer {
	display: flex;
	justify-content: flex-end;

	.markupbtn {
		border: 1px solid rgba(217, 217, 217, 1);
		border-radius: 4px;
		padding: 8px 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 8px;
		min-width: 70px;
	}
}

::v-deep .el-dialog__body {
	padding: 10px 20px;
	color: #606266;
	font-size: 14px;
	word-break: break-all;
}
</style>